<style scoped>
  td, th{
    text-align: center;
    line-height: 24px;
  }
  td i{
    display: inline-block;
    margin: 5px;
  }
  .has-addons{
    display: inline-block;
  }
</style>
<template>
  <main>
    <div class="control is-grouped">
      <p class="control">
        <a class="button is-primary">
           新增
        </a>
      </p>
    </div>
    <div class="tile is-ancestor">
      <div class="tile is-parent">
        <article class="tile is-child box">
          <h4 class="title is-4">当前作业</h4>
          <div class="table-responsive">
            <table class="table is-bordered is-striped is-narrow">
              <thead>
              <tr>
                <th>作业名称</th>
                <th>所属用户</th>
                <th>开始时间</th>
                <th>进度</th>
                <th>状态</th>
                <th>操作</th>
              </tr>
              </thead>
              <tbody>
              <tr>
                <td class="is-icon">
                  五月流量报表
                </td>
                <td>
                  小米
                </td>
                <td>
                 2017/7/7 12:21:01
                </td>
                <td>
                  <progress-bar style="margin: 10px 0" :type="'success'" :value="60" :max="100"></progress-bar>
                </td>
                <td>
                  <i class="fa fa-cog"></i>执行中
                </td>
                <td>
                  <p class="control has-addons">
                    <a class="button">
                      <span>启动</span>
                    </a>
                    <a class="button">
                      <span>查看</span>
                    </a>
                    <a class="button">
                      <span>修改</span>
                    </a>
                    <a class="button">
                      <span>删除</span>
                    </a>
                  </p>
                </td>
              </tr>
              </tbody>
            </table>
          </div>
        </article>
      </div>
    </div>
    <div class="tile is-ancestor">
      <div class="tile is-parent">
        <article class="tile is-child box">
          <h4 class="title is-4">已完成作业</h4>
          <div class="table-responsive">
            <table class="table is-bordered is-striped is-narrow">
              <thead>
              <tr>
                <th>作业名称</th>
                <th>所属用户</th>
                <th>开始时间</th>
                <th>进度</th>
                <th>状态</th>
                <th>操作</th>
              </tr>
              </thead>
              <tbody>
              <tr>
                <td class="is-icon">
                  五月流量报表
                </td>
                <td>
                  小米
                </td>
                <td>
                  2017/7/7 12:21:01
                </td>
                <td>
                  <progress-bar style="margin: 10px 0" :type="'success'" :value="60" :max="100"></progress-bar>
                </td>
                <td>
                  <i class="fa fa-check"></i>执行完毕
                </td>
                <td>
                  <p class="control has-addons">
                    <a class="button">
                      <span>查看</span>
                    </a>
                    <a class="button">
                      <span>删除</span>
                    </a>
                  </p>
                </td>
              </tr>
              </tbody>
            </table>
          </div>
        </article>
      </div>
    </div>
  </main>
</template>

<script>
  import ProgressBar from 'vue-bulma-progress-bar'
  export default {
    components: {
      ProgressBar
    },

    data () {
      return {
      }
    },

    computed: {
    },

    mounted () {
    }
  }
</script>

<style lang="scss" scoped>
</style>
